<template>
	<view id="my" class="my">
		<!-- 头部信息 -->
		<view class="my-top">
			<view class="my-top-txt">
				<view>NABERCAT</view>
				<view>买猫就选nabercat，更放心</view>
			</view>
			<view class="my-top-head" @click="bindLogin">
				<image :src="userInfo.headimgurl" mode="aspectFill" class="head-img"></image>
				<view class="my-nickname">{{ userInfo.nickname ? userInfo.nickname : '点击登录' }}</view>
			</view>
		</view>
		<!-- 分类功能 -->
		<view class="fl-fun-list">
			<view class="fl-fun-item" @click="jumpList('/pagesMy/publish/publish')">
				<icon class="my-fb"></icon>
				<text class="text">我的发布</text>
			</view>
			<view class="fl-fun-item" @click="jumpList('/pagesMy/buyCatList/buyCatList')">
				<icon class="my-gmjl"></icon>
				<text class="text">购猫记录</text>
			</view>
			<view class="fl-fun-item" @click="jumpList('/pagesMy/bill/bill')">
				<icon class="my-qb"></icon>
				<text class="text">我的钱包</text>
				<text class="fl-right">￥{{ total }}</text>
			</view>
			<view class="fl-fun-item" @click="jumpList('/pagesMy/collect/collect')">
				<icon class="my-sc"></icon>
				<text class="text">我的收藏</text>
			</view>
			<view class="fl-fun-item" @click="jumpList('/pagesMy/agency/agency', 4)">
				<icon class="my-dl"></icon>
				<text class="text">招财猫</text>
			</view>
		</view>
		<!-- 底部tabbar -->
		<tabbar class="tabbar" :path="'my'" @release="recordLife" />
		<view style="height: 200rpx;"></view>
		<!-- 发布 -->
		<lifePopup ref="lifePopup"></lifePopup>
	</view>
</template>

<script>
const app = getApp();
import { xVip, ckAgent } from '@/api/index.js';
import tabbar from '@/wxcomponents/tabbar/index.vue';
import lifePopup from '@/wxcomponents/life-popup/index.vue';
export default {
	components: {
		tabbar,
		lifePopup
	},
	data() {
		return {
			total: 0,
			openid: '',
			userInfo: {} //个人信息
		};
	},
	methods: {
		// 获取余额
		async xVip() {
			const res = await xVip({
				openid: this.openid
			});
			this.total = res.total;
		},
		// 判断是否是代理
		async ckAgent(url) {
			const res = await ckAgent({
				openid: this.openid
			});
			if (res == 1) {
				uni.navigateTo({
					url: url
				});
			} else {
				uni.navigateTo({
					url: `/pages/webView/webView?url=${res}`
				});
			}
		},
		// 点击登录
		bindLogin: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
		},

		// 跳转列表
		jumpList: function(url, type) {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (type == 4) {
				this.ckAgent(url);
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		// 记录生活
		recordLife: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			this.$refs.lifePopup.isRecord = true;
		}
	},
	onLoad() {},
	onShow() {
		// 获取头像和昵称
		uni.getStorage({
			key: 'userInfo',
			success: res => {
				this.userInfo = res.data;
			}
		});
		this.openid = uni.getStorageSync('openid');
		this.xVip();
	}
};
</script>

<style lang="scss">
#my {
	height: 100%;
	background: #f9f9f9;
	font-family: PingFangSC-Medium, PingFang SC;
}
.my-top {
	width: 100%;
	height: 532rpx;
	background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lh-my-bg.png) no-repeat;
	background-size: cover;
	position: relative;
	margin-bottom: 170rpx;
	.my-top-txt {
		padding-top: 190rpx;
		text-align: center;
		color: #ffffff;
		& > view:nth-of-type(1) {
			font-size: 50rpx;
			font-weight: 600;
			line-height: 72rpx;
		}
		& > view:nth-of-type(2) {
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			letter-spacing: 2rpx;
		}
	}
	.my-top-head {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 412rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.head-img {
			width: 190rpx;
			height: 190rpx;
			border-radius: 50%;
			border: 8rpx solid #ffffff;
			margin-bottom: 20rpx;
			background: #f5f5f5;
		}
		.my-nickname {
			font-size: 48rpx;
			font-weight: 500;
			color: #262626;
			line-height: 66rpx;
			width: 500rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
		}
	}
}

.fl-fun-list {
	padding:0 30rpx;
	box-sizing: border-box;
	.fl-fun-item {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1rpx solid #d8d8d8;
		&:nth-last-of-type(1) {
			border: none;
		}
		icon {
			width: 48rpx;
			height: 50rpx;
			margin-right: 16rpx;
		}
		.my-fb {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lh-my-fabu.png) no-repeat;
			background-size: cover;
		}
		.my-gmjl {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-wode-my-goumaojilu.png) no-repeat;
			background-size: cover;
		}
		.my-qb {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lh-my-qianbao.png) no-repeat;
			background-size: cover;
		}
		.my-sc {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-wode-my-wodeshouc.png) no-repeat;
			background-size: cover;
		}
		.my-dl {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lh-icon-my-daili.png) no-repeat;
			background-size: cover;
		}
		.text {
			font-size: 28rpx;
			font-weight: 500;
			color: #262626;
			line-height: 40rpx;
		}
		.fl-right {
			font-size: 36rpx;
			font-weight: 600;
			color: #262626;
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>
